@import '../../../styles/var';

@progress: ~'@{prefix}-progress';

.@{progress}-line {
  font-size: 0;

  .@{progress}-outer,
  .@{progress}-text {
    display: inline-block;
    vertical-align: top;
  }

  .@{progress}-outer {
    width: 100%;
  }

  &.@{progress}-show-info {
    .@{progress}-outer {
      width: calc(100% - 50px);
    }
  }

  .@{progress}-inner {
    background-color: @section-background;
    margin: 5px 0;
  }

  .@{progress}-bg {
    height: 10px;
    width: 0;
    background-color: @primary-color;
    transition: width @normal-motion linear;
  }

  &.@{progress}-status-active {
    .@{progress}-bg {
      &:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: @component-background;
        opacity: 0;
        transform-origin: 0 0;
        animation: @progress-active 3s @ease-out-quintic infinite;
      }
    }
  }

  .@{progress}-text {
    font-size: 14px;
    width: 50px;
    box-sizing: border-box;
    padding-left: 5px;
  }
}
